<template>
  <div> <!--v-loading="loading" 已统一-->
    <div class="ly-filter">
      <el-input placeholder="请输入要搜索的员工姓名" v-model="searchValue"></el-input>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="success" @click="add">添加</el-button>
    </div>
    <el-table :data="tableData.records" border>
      <el-table-column type="expand">
        <template #default="scope">
          <el-form label-width="100px">
            <el-form-item label="姓名">{{ scope.row.realname }}</el-form-item>
            <el-form-item label="手机号">{{ scope.row.phone }}</el-form-item>
            <el-form-item label="电子信箱">{{ scope.row.email }}</el-form-item>
            <el-form-item label="所在科室">{{ editorData.depts[scope.row.deptmentId] }}</el-form-item>
            <el-form-item label="挂号级别">{{ editorData.regists[scope.row.registLevelId] }}</el-form-item>
            <el-form-item label="所在科室">{{ editorData.schedulings[scope.row.schedulingId] }}</el-form-item>
            <el-form-item label="头像">
              <img :src="getImgPath(scope.row.icon)" />
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="realname"></el-table-column>
      <el-table-column label="手机号" prop="phone" show-overflow-tooltip></el-table-column>
      <el-table-column label="电子信箱" prop="email"></el-table-column>
      <el-table-column label="状态">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.delmark">有效</el-tag>
          <el-tag type="danger" v-else>无效</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140px">
        <template #default="scope"> <!--scope.row 为当前行数据-->
          <template v-if="scope.row.delmark">
            <el-button type="primary" size="small" plain @click="update(scope.row.id)">修改</el-button>
            <el-button type="danger" size="small" @click="del(scope.row.id, 0)">删除</el-button>
          </template>
          <el-button v-else type="warning" size="small" @click="del(scope.row.id, 1)">还原</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 10px;" background :total="tableData.total" v-model:page-size="params.pageSize"
      v-model:current-page="params.pageNo" @change="getTableData">
    </el-pagination>
    <!--添加科室弹窗-->
    <el-dialog width="600px" v-model="dialog.show" :title="dialog.title" :close-on-click-modal="false"> <!--点击外层关闭弹窗 -->
      <Editor v-if="dialog.show" v-model:show="dialog.show" :id="dialog.id" @getTableData="getTableData"></Editor>
    </el-dialog>
  </div>
</template>

<script setup>
import { get, post } from '@/utils/axios'
import { reactive, ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import Editor from './editor'
import { url } from './api'
import { getImgPath } from '@/utils/index'
const editorData = reactive({
  depts: {},
  regists: {},
  schedulings: {}
})
const tableData = reactive({
  records: [],
  pages: 0,
  total: 0
})
const params = reactive({
  pageNo: 1,
  pageSize: 10,
  name: ''
})
const searchValue = ref('')
const dialog = reactive({
  show: false,
  title: '',
  id: null
})
getEditData()
getTableData()
function add() {
  dialog.title = '添加员工'
  dialog.id = null
  dialog.show = true // 显示弹窗
}
function update(id) {
  dialog.title = '修改员工'
  dialog.id = id
  dialog.show = true // 显示弹窗
}
function search() {
  params.pageNo = 1
  params.name = searchValue.value
  getTableData()
}
function getTableData() {
  get(url.list, params, content => {
    tableData.records = content.records
    tableData.pages = content.pages
    tableData.total = content.total
  })
}
function del(id, delmark) {
  const text = delmark ? '确定要将该员工还原吗？' : '确定要将该员工删除吗？'
  ElMessageBox.confirm(text, '警告', {
    type: 'warning'
  }).then(() => {
    post(url.del, { id, delmark }, content => {
      getTableData()
    })
  }).catch(() => { })

}
function getEditData() {
  get(url.getEditData, {}, content => {
    for (const i in content.depts) {
      editorData.depts[content.depts[i].id] = content.depts[i].name
    }
    for (const i in content.regists) {
      editorData.regists[content.regists[i].id] = content.regists[i].name
    }
    for (const i in content.schedulings) {
      editorData.schedulings[content.schedulings[i].id] = content.schedulings[i].ruleName
    }
    console.dir(editorData.depts)
  })
}
</script>

<style lang='scss' scoped></style>